<template>
<TreeSelect v-model="dep" :data="data" @on-change="change" :disabled="disabled" :multiple="multiple"/>
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'on-change'
  },
  data() {
    return {
      dep: '',
      data: [],
      list:[]
    }
  },
  created() {
    this.dep=this.value|'';
    this.$api.get(`${systemUrl}/Department/GetDepartments`).then((r) => {
      this.list=r.result.items;
        var data=this.$u.toTree(r.result.items,0,u=>{
            u.title=u.name;
            u.value=u.id;
            u.expand=true;
            u.selected=false;
            u.checked=false;
        },"parent_Id")
        this.data = this.$u.clone(data) ;
    })
  },
  props: {
    value: [String, Number, Array],
    placeholder: {
      type: String,
      default: '请选择部门'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
  },
  methods: {
      change(v){
        console.log(v)
          this.dep=v;
          var item;
          var items=this.list.filter(u=>{
            return u.id==v
          })
          if(items&&items.length>0){
           item=items[0];
          }
          this.$emit("on-change",v,item)
      }
  },
  watch: {
    value: {
      handler(v, o) {
        this.dep = v|''
      },
      deep: true
    }
  }
}
</script>